<html>
	<head> 
		<title> 
			DVD Share - Welcome {{nickname}} 
		</title> 
		<link rel="stylesheet" type="text/css" href="/static/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/styles.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/list.css" />
		<link rel="stylesheet" type="text/css" href="/static/css/buttons.css" />

		<script type="text/javascript" src="/script/jquery-1.6.2.min.js"></script>
		<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
		<script type="text/javascript" src="/script/util.js"></script>
		<script type="text/javascript" src="/script/common.js"></script>
		<script type="text/javascript" src="/script/home.js"></script>		
	</head>

	<body>
		<div id="generic_popup_background" class="popup_background" style="display:none"></div>
		<!--<div id="itemDescriptor" class="popup_container" style="display:none">	
		</div>-->
		<div id="newItemContainer" class="popup_container" style="display:none">
			<fieldset>
				<legend> New DVD Details </legend>
				<form id="newItemInputForm">
						<table>
							<tr>
								<td> Item Type </td>
								<td> 
									<select id="newItemType">
										<option value="DVD"> DVD </option>
										<option value="BOOK"> Book </option> 
									</select>
								</td>
							</tr>
							<tr>
								<td> Movie Title </td>
								<td> <input id="newItemTitle" class="user_input" data-placeholder="Enter DVD title"> </td>
							</tr>
						</table>
						<div>
							<button type="submit" class="blue button" id="newItemSubmit" label="Get Details">Get Details</button>
							<button class="my_items_popup_hide"> Cancel </button>
						</div>					
				</form>
			</fieldset>
			
			<fieldset>
				<legend> Review </legend>
				<form id="newItemPreviewForm">
						<table>
							<tr>
								<td> Movie Title </td>
								<td> <input id="newItemTitle" class="user_input" data-placeholder="Enter DVD title"> </td>
							</tr>
							<tr>
								<td> Year of Release </td>
								<td> <input id="newItemYear" class="user_input" data-placeholder="Enter edition/release year"> </td>
							</tr>
							<tr>
								<td> IMDB Link </td>
								<td> <input id="newItemLink" class="user_input" data-placeholder="Enter external link"> </td>
							</tr>
							<tr>
								<td> Cast </td>
								<td> <input id="newItemActors" class="user_input" data-placeholder="Enter list of actor(s), seperated by commas"> </td>
							</tr>
							<tr>
								<td> Direction </td>
								<td> <input id="newItemDirectors" class="user_input" data-placeholder="Enter list of directors(s), seperated by commas"> </td>
							</tr>
							<tr>
								<td> Music </td>
								<td> <input id="newItemMusicDirectors" class="user_input" data-placeholder="Enter list of music directors(s), seperated by commas"> </td>
							</tr>
						</table>
						
						<img id="newItemThumbNail">

						<div>
							<button type="submit" class="blue button" id="newItemSubmit" label="Add Item to database"> Add Item </button>
							<button class="my_items_popup_hide"> Cancel </button>
						</div>
				</form>
			</fieldset>
		</div>
		
		<div id="newFriendsContainer" class="popup_container" style="display:none">
			<fieldset>
				<table>
					<tr>
						<td> Connect to my friends via </td>
						<td> 
							<select id="newFriendType">
								<option value="Facebook"> Facebook </option>
								<option value="Twitter"> Twitter </option>
								<option value="Google+"> Google+ </option>  
							</select>
						</td>
					</tr>
			</fieldset>
			
			<fieldset>
				<legend> Select Friends to Watch </legend>
				<form id="newItemPreviewForm">
						<table>
							<tr>
								<td> Movie Title </td>
								<td> <input id="newItemTitle" class="user_input" data-placeholder="Enter DVD title"> </td>
							</tr>
							<tr>
								<td> Year of Release </td>
								<td> <input id="newItemYear" class="user_input" data-placeholder="Enter edition/release year"> </td>
							</tr>
							<tr>
								<td> IMDB Link </td>
								<td> <input id="newItemLink" class="user_input" data-placeholder="Enter external link"> </td>
							</tr>
							<tr>
								<td> Cast </td>
								<td> <input id="newItemActors" class="user_input" data-placeholder="Enter list of actor(s), seperated by commas"> </td>
							</tr>
							<tr>
								<td> Direction </td>
								<td> <input id="newItemDirectors" class="user_input" data-placeholder="Enter list of directors(s), seperated by commas"> </td>
							</tr>
							<tr>
								<td> Music </td>
								<td> <input id="newItemMusicDirectors" class="user_input" data-placeholder="Enter list of music directors(s), seperated by commas"> </td>
							</tr>
						</table>
						
						<img id="newItemThumbNail">

						<div>
							<button type="submit" class="blue button" id="newItemSubmit" label="Add Item to database"> Add Item </button>
							<button class="my_items_popup_hide"> Cancel </button>
						</div>
				</form>
			</fieldset>
		</div>


		<div class="status_message_container" id="statusMessageContainer"> 
			<h3 class="status_message" id="statusMessage"> </h3>
		</div> 

		<div class="header" id="header_container">		
			<div id="header_wrapper">
				<span id="header_title">
					<a href="#"><img src="/images/DVD_Icon.png"/></a>
				</span>
				<span id="header_nav">
					<a class="nav_item" href="#"> about </a>
					<a class="nav_item" href="#"> how it works </a>
					<a class="nav_item last_item" href="#"> contact </a>
				</span>
			</div>
		</div>
		
		<div class="content_container">
			<div class="inner_container">
			<div class="user_nav_container">
				<div class="search_container">
					<form action="" method="get">
						<input type="text" class="user_input" data-placeholder="Search"/>
						<a href="#" class="blue button search_submit" id="submit0"> Search </a>
					</form>
				</div>
				<div class="user_nav">
					<h3> {{nickname}} </h3>
					<div class="nav_container">
					<ul class="nav">
						<li> <img class="user_nav_menu" id="user_nav_img" src="/static/images/gear.png"/>
							<ul class="sub" id="user_menu">
					  			<li class="top"> <a href="#"> Manage Account </a> </li>
								<li> <a href="#"> Manage DVDs </a> </li>
								<li> <a href="#"> Other options </a> </li>
								<li class="bottom"> <a href="{{sign_out}}"> Logout </a> </li>
							</ul>
				  		</li>
					</ul>
					</div>
				</div>
			</div>
			<div class="clear_div"></div>
			
			<div class="section_container light">
				<div class="section_title noblock">
					<h2> My DVDs </h2>
					<span class="number_banner black"> <p> 0 </p> </span>
				</div>
				
				<a href="#" class="button green right" id="addItemButton"> Add DVD </a>	

				<div class="section_grid_container">
					<div class="lscroll"></div>
					<div class="section_grid" id="myDvdsSection">
						<div class="section_overflow_grid">
						</div> 
					</div>
					<div class="rscroll"> </div>
				</div>
			</div>
			
			<div class="section_container dark">	
				<div class="section_title">
					<h2> My Friends' DVDs </h2>
					<span class="number_banner black"> 0 </span>
				</div>

				<div id="fb-root"></div>
				<div id="friendsFBDiv"></div>	
				<a href="#" class="button green right" id="friendsTwitterButton"> Connect via Twitter </a>	
				
				<div class="section_grid_container">
					<div class="lscroll">
					</div>
					<div class="section_grid" id="friendsDvdsSection"> 
						<div class="section_overflow_grid">
						</div>
					</div>
					<div class="rscroll">
					</div>
				</div>
			</div>	
			
			<div class="section_container light">								
				<div class="section_title">
					<h2> My Wishlist DVDs </h2>
					<span class="number_banner black"> 0 </span>
				</div>
				<div class="section_grid_container">
					<div class="lscroll">
					</div>
					<div class="section_grid" id="wlDvdsSection"> 
						<div class="section_overflow_grid">
						</div>
					</div>
					<div class="rscroll">
					</div>
				</div>
			</div>
		</div>

		<div class="footer">
			<div class="inner_container">
				<h2> &copy;  2011 Enthupreneurs Inc </h2>
			</div>
		</div>
		
	</body>
</html>
